<template>
	<view class="address">
		<view class="row b-b">
			<text class="tit">姓名</text>
			<view class="cont">
				<input class="input" type="text" v-model="addressData.addressee" placeholder="请输入收货人姓名" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<view class="cont">
				<input class="input" type="number" v-model="addressData.addresseePhone" placeholder="请输入收货人电话"  placeholder-class="placeholder" maxlength="11" />
			</view>
		</view>
		<view class="row b-b"> 
			<text class="tit">所在地区</text>
			<view class="cont flexT">
				<input class="input" :value="pickerValue" @focus="showThreePicker" placeholder="选择地址"/>
				<text class="cell-more iconfont icon-you"></text>
				<area-picker ref="areaPicker" :region-list="region" @onConfirm="onConfirm"></area-picker>
			</view>
		</view>
		<view class="row b-b">
			<view class="cont">
				<textarea class="input textarea" :maxlength="50" :disabled="true"
				v-model="addressData.address" placeholder="请先选择详细地址"/>
			</view>
			<view class="icon-address">
				<uni-address @onConfirm="selectAddress"></uni-address>
			</view>
		</view>
		<!-- <view class="row b-b">
			<text class="tit">门牌号</text>
			<view class="cont">
				<input class="input" v-model="addressData.street" placeholder="请输入门牌号"  placeholder-class="placeholder" maxlength="20" />
			</view>
		</view> -->
		<view class="row">
			<view class="cont">
				<label class="radio" @click="changeRadio">
					<h-icon src="selected" v-if="addressData.isDefault==1"></h-icon>
					<h-icon src="select" v-else></h-icon>
					设置为默认地址
				</label>
			</view>
		</view>
		<view v-if="manageType=='edit'" class="row b-t" @click="deleteConsignee">
			<text class="tit3">删除收货地址</text>
		</view>
		<view class="fixed-bottom">
			<button class="add-btn no-border" @click="confirm">{{ manageType=='edit' ? '保存': '添加' }}</button>
		</view>
		<!--删除取消订单-弹窗-->
		<uni-pop type="confirm"
			v-model="popData.isShow"
			:title="popData.title"
			@onConfirm="onConfirmDel"
		/>
	</view>
</template>

<script>
	import areaPicker from "@/components/area-picker.vue";
	import { mapState } from 'vuex'
	export default {
		components:{
			areaPicker
		},
		data() {
			return {
				popData:{}, // 弹窗信息
				manageType:'add', // add新增或者 edit编辑
				addressData: {
					addressee: '',
					addresseePhone: '',
					address: '',
					street:'',
					isDefault: 1,
					longitude:'',
					latitude:''
				},
				defaultIndex: [0, 0, 0],
				region: ['北京市','北京市','东城区'],
				isfromOrder: false // 从提交订单过来
			}
		},
		computed:{
			...mapState(['hasLogin','userInfo']),
			pickerValue() {
				return this.region.length?this.region.join(' '):''
			}
		},
		onLoad(option){
			let title = '新增收货地址';
			if(option.type==='edit'){
				title = '编辑收货地址'
				let res = JSON.parse(option.data)
				this.addressData = res
				let arr = res.address.split('|')
				this.addressData.address = arr[0]
				this.addressData.street = arr[1]
				this.region = res.region
			} else if(option.source){
				//添加
				this.isfromOrder = true
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			changeRadio(){
				this.addressData.isDefault = this.addressData.isDefault==1?2:1
			},
			// 省市区联动初始化
			showThreePicker() {
				this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				this.region = e.map(item=>(item.name))
			},
			selectAddress(res){
				this.region = res.region
				this.addressData.address =res.street+res.name
				this.addressData.latitude = res.latitude
				this.addressData.longitude = res.longitude
			},
			//删除地址4444
			deleteConsignee(){
				this.popData = {
					isShow: true,
					title:`亲，您确定要删除该地址吗？`
				}
			},
			onConfirmDel(){ //删除地址
				const addressId = this.addressData.addressId
				this.$apis.postApi('/address/remove',{addressId}).then(({code}) => {
					if(code==200){
						this.popData.isShow = false
						this.$api.prePage() // 获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
						this.$api.prePage().refreshList(this.addressData, 'delete');
						this.$api.msg(`地址删除成功`);
						setTimeout(()=>{
							uni.navigateBack()
						}, 800)
					}
				})
			},
			//提交
			confirm(){
				let data = { ...this.addressData};
				if(!data.addressee){
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.addresseePhone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(this.region.length!=3){
					this.$api.msg('请选择所在地区');
					return;
				}
				if(!data.address){
					this.$api.msg('请填写详细地址');
					return;
				}
				data.userId = this.userInfo.userId
				data.provinceCode = this.region[0]
				data.cityCode = this.region[1]
				data.districtCode = this.region[2]
				if(data.street){
					data.address = data.address+'|'+data.street
				}
				const path = this.manageType=='edit' ? '/address/update': '/address/add'
				this.$apis.postApi(path,data).then(({code,message}) => {
					if(code==200){
						this.$api.prePage() // 获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
						this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
						if(this.isfromOrder) {
							this.$api.prePage().listConsignee()
						} else {
							this.$api.prePage().refreshList(data, this.manageType)
						}
						setTimeout(()=>{
							uni.navigateBack()
						}, 800)
					} else {
						this.$api.msg(message);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address{
		padding: 0 24upx 180upx;
		background: #fff;
		border-radius: 16upx;
		position: absolute;
		top: 20upx;
		left: 20upx;
		right: 20upx;
		bottom: 20upx;
	}
	.row{
		min-height: 98upx;
		background: #fff;
		display: flex;
		align-items: center;
		position: relative;
		.tit{
			font-size: 30upx;
			width: 180upx;
		}
		.cont{
		 	flex: 1;
		}
		.tit2{
			font-size: 24upx;
			color: #333;
		}
		.tit3{
			font-size: 30upx;
			color: #F03F00;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.textarea{
			height: 80upx;
			margin: 28upx 0;
			width: 90%;
		}
		.icon-address{
			height: 80upx;
			width: 50upx;
		}
	}
	.fixed-bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		padding: 0 56upx;
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88upx;
		font-size: 30upx;
		font-weight: 500;
		border-radius: 0;
		margin-bottom: 40upx;
		background: linear-gradient(360deg, #3B99FF 0%, #4083F0 100%);
		border-radius: 44upx;
	}

</style>
